<template>
  <div class="ResultDetails-Panel" v-loading="State.Loading">
    <div class="ResultDetails-PersonalInformation" v-if="State.MathBoolean === 0">
      <div class="className" style="margin-left: 15px;">
        <span>{{ State.MathPersonalInformation.Task }}</span>
        <span></span>
        <span>{{ State.MathPersonalInformation.TaskValue }}</span>
      </div>
      <div class="headlineBox">
        <div class="TitleBox">
          <img src="../../../public/img/姓名.png" alt="">
          <span>{{ State.MathPersonalInformation.Name }}</span>
          <span></span>
          <span>{{ State.MathPersonalInformation.NameValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/用时.png" alt="">
          <span>{{ State.MathPersonalInformation.Time }}</span>
          <span></span>
          <span>{{ State.MathPersonalInformation.TimeValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/完成率.png" alt="">
          <span>{{ State.MathPersonalInformation.percentage }}</span>
          <span></span>
          <span>{{ State.MathPersonalInformation.percentageValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/正确率.png" alt="">
          <span>{{ State.MathPersonalInformation.accuracy }}</span>
          <span></span>
          <span>{{ State.MathPersonalInformation.accuracyValue }}</span>
        </div>
      </div>
    </div>
    <div class="ResultDetails-PersonalInformation" v-else>
      <div class="className" style="margin-left: 15px;">
        <span>{{ State.PersonalInformation.Task }}</span>
        <span></span>
        <span>{{ State.PersonalInformation.TaskValue }}</span>
      </div>
      <div class="headlineBox">
        <div class="TitleBox">
          <img src="../../../public/img/姓名.png" alt="">
          <span>{{ State.PersonalInformation.Name }}</span>
          <span></span>
          <span>{{ State.PersonalInformation.NameValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/用时.png" alt="">
          <span>{{ State.PersonalInformation.Time }}</span>
          <span></span>
          <span>{{ State.PersonalInformation.TimeValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/完成率.png" alt="">
          <span>{{ State.PersonalInformation.percentage }}</span>
          <span></span>
          <span>{{ State.PersonalInformation.percentageValue }}</span>
        </div>
        <div class="TitleBox">
          <img src="../../../public/img/正确率.png" alt="">
          <span>{{ State.PersonalInformation.accuracy }}</span>
          <span></span>
          <span>{{ State.PersonalInformation.accuracyValue }}</span>
        </div>
      </div>
    </div>
    <div class="ContentBox">
      <div class="contentBox1">
        <h2>恭喜您!完成考核</h2>
        <span class="score">{{ State.orders.Score }}</span>
        <span class="scoreText">分</span>
        <div class="ranking">
          <div class="masteryDegree">
            <span>结构掌握：</span>
            <el-rate class="star" v-model="construction" allow-half disabled disabled-void-color="#C8DFF3"
              :colors="['#3080ec', '#3080ec', '#3080ec']" />
          </div>
          <div class="masteryDegree">
            <span>组成掌握：</span>
            <el-rate class="star" v-model="constitute" allow-half disabled disabled-void-color="#C8DFF3"
              :colors="['#3080ec', '#3080ec', '#3080ec']" />
          </div>
          <div class="masteryDegree">
            <span>原理掌握：</span>
            <el-rate class="star" v-model="theory" allow-half disabled disabled-void-color="#C8DFF3"
              :colors="['#3080ec', '#3080ec', '#3080ec']" />
          </div>
          <div class="masteryDegree">
            <span>参数掌握：</span>
            <el-rate class="star" v-model="parameter" allow-half disabled disabled-void-color="#C8DFF3"
              :colors="['#3080ec', '#3080ec', '#3080ec']" />
          </div>
        </div>
      </div>
      <div class="contentBox2">
        <div class="content2" v-for="item in State.orderItems">
          <h5>{{ item.Name }}</h5>
          <div style="display: flex;" v-for="items in item.Results">
            <div class="content_div">
              <div class="faultDetail">
                <img src="/img/diagnosticDetails/拆装_成绩详情/矩形.png" style="height: 50px;margin-right: 25px;">
                <img src="/img/diagnosticDetails/拆装_成绩详情/菱形.png" style="margin-right: 13px;">
                <div class="text" v-if="items.State.charAt(0) == 2 && Number(items.Source) == 0.00"
                  style="color:  rgba(67, 207, 124, 1);">{{ items.Name }}</div>
                <div class="text-1" v-if="items.State.charAt(0) == 2 && Number(items.Source) > 0.00"
                  style="color: rgba(67, 207, 124, 1);">{{ items.Name }}</div>
                <div class="text-1" v-if="items.State.charAt(0) == 1" style="color:  rgba(255, 87, 51, 1);">{{
                  items.Name
                }}</div>
                <div class="text-1" v-if="items.State.charAt(0) == 0" style="color:  rgba(154, 157,176,1);">{{
                  items.Name
                }}</div>


                <span v-if="items.State.charAt(0) == 2 && Number(items.Source) > 0.00"
                  style="color: rgba(67, 207, 124, 1);">
                  <span style="color: #81859C;">{{ items.Source }}</span>
                  <img src="/img/diagnosticDetails/拆装_成绩详情/正确.png"
                    style="margin-right: 15px;margin-left: 60px;">已完成</span>
                <span v-if="items.State.charAt(0) == 2 && Number(items.Source) == 0.00"
                  style="color: rgba(67, 207, 124, 1);">
                  <img src="/img/diagnosticDetails/拆装_成绩详情/正确.png" style="margin-right: 15px;">已完成</span>

                <!-- <span v-if="items.State.charAt(0) == 1" style="color:  rgba(255, 87, 51, 1);">
                  {{ items.Source }}<img src="/img/diagnosticDetails/拆装_成绩详情/错误.png"
                    style="margin-right: 15px;margin-left: 60px;">未完成</span> -->
                <!-- 有值且不为0，有值为0，值为null -->
                <span v-if="items.State.charAt(0) == 1 && items.Source && items.Source != 0"
                  style="color:  rgba(255, 87, 51, 1);">
                  {{ items.Source }}<img src="/img/diagnosticDetails/拆装_成绩详情/错误.png"
                    style="margin-right: 15px;margin-left: 60px;">未完成</span>
                <span v-if="items.State.charAt(0) == 1 && !items.Source" style="color:  rgba(255, 87, 51, 1);">
                  0.00<img src="/img/diagnosticDetails/拆装_成绩详情/错误.png"
                    style="margin-right: 15px;margin-left: 60px;">未完成</span>
                <span v-if="items.State.charAt(0) == 1 && items.Source && items.Source == 0"
                  style="color:  rgba(255, 87, 51, 1);">
                  0.00<img src="/img/diagnosticDetails/拆装_成绩详情/错误.png"
                    style="margin-right: 15px;margin-left: 60px;">未完成</span>
                <!-- <span v-if="items.State.charAt(0) == 0" style="color:  rgba(154, 157,176,1);">
                  {{ items.Source }}<img src="/img/diagnosticDetails/拆装_成绩详情/未提交.png"
                    style="margin-right: 15px;margin-left: 60px;">未操作</span> -->
                <span v-if="items.State.charAt(0) == 0" style="color:  rgba(154, 157,176,1);">
                  0.00<img src="/img/diagnosticDetails/拆装_成绩详情/未提交.png"
                    style="margin-right: 15px;margin-left: 60px;">未操作</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, onMounted, toRef, toRefs } from "vue";
import bus from "@/bus.js";
// import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
  name: "DismountingDiagnosis",
  components: {
    // ArrowDown
  },
  props: {
    ResultDetails: {
      type: Object,
      default: () => { },
    },
    MatchBoolean: {
      type: Number,
      default: 1,
    },
  },
  setup(props, ctx) {
    let construction = ref()
    let constitute = ref()
    let theory = ref()
    let parameter = ref()


    let State = reactive(
      {
        //工单名称
        WorkOrderName: '工单记录',
        Loading: true,
        //工单数组
        WorkOrderArr: [],
        //工单所有数据
        orders: '',
        orderItems: [],
        MathBoolean: false,
        //选项
        SelectOptionIndex: 0,
        //个人信息
        MathPersonalInformation: {
          Task: "任务",
          TaskValue: sessionStorage.getItem("TaskTitle"),
          Name: "姓名",
          NameValue: sessionStorage.getItem("StudentName"),
          Time: "用时",
          TimeValue: FNumToDate(props.ResultDetails.time),
          percentage: "完成率",
          percentageValue: JSON.parse(props.ResultDetails.orders).PercentageComplete,
          accuracy: "正确率",
          accuracyValue: JSON.parse(props.ResultDetails.orders).Accuracy,
        },
        PersonalInformation: {
          Task: "任务",
          TaskValue: props.ResultDetails.trainingTaskName,
          Name: "姓名",
          NameValue: props.ResultDetails.userName,
          Time: "用时",
          TimeValue: FNumToDate(props.ResultDetails.time),
          percentage: "完成率",
          percentageValue: JSON.parse(props.ResultDetails.orders).PercentageComplete,
          accuracy: "正确率",
          accuracyValue: JSON.parse(props.ResultDetails.orders).Accuracy,
        },
      }
    )
    //用于判断是否是比赛进入还是普通进入查询成绩
    State.MathBoolean = props.MatchBoolean
    //处理时间函数
    function FNumToDate(seconds) {
      let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
      seconds -= 3600 * hour;
      let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
      seconds -= 60 * min;
      let sec = seconds >= 10 ? seconds : '0' + seconds;
      return hour + ':' + min + ':' + sec;
    }

    let Result = props.ResultDetails
    if (Result.orders == '') {
      Result.orders = null
    }

    let orders = JSON.parse(Result.orders)
    State.orders = orders
    console.log('工单数据++++++++++++++', State.orders);
    State.orderItems = State.orders.Items
    console.log('所需数据：============', State.orderItems);
    State.orders.Veidoos.forEach((element) => {
      if (element.Name == '结构认知') {
        construction.value = element.Result
        console.log('结构', construction.value);
      } else if (element.Name == '结构组成') {
        constitute.value = element.Result
        console.log('组成', constitute.value);
      } else if (element.Name == '原理认知') {
        theory.value = element.Result
        console.log('原理', theory.value);
      } else if (element.Name == '参数') {
        parameter.value = element.Result
        console.log('参数', parameter.value);
      }
    });

    onMounted(() => {
      State.Loading = false
      console.log('类型为7的结构');
    });
    return {
      State,
      FNumToDate,
      construction,
      constitute,
      theory,
      parameter,
    };
  },
});
</script>
<style scoped lang="less">
.deduct {
  position: absolute;
}

.ContentBox {
  width: 100%;
  height: 800px;
  // overflow-y: auto;
  display: flex;
}



.box {
  display: flex;
  width: 26%;
  justify-content: space-around;
  line-height: 52px;
  font-size: 16px;
}

.contentBox1 {
  width: 30%;
  height: 800px;
  border-right: 1px solid #e6e7eb;
}

.contentBox2 {
  width: 70%;
  height: 800px;
  overflow-y: auto;
  padding: 0px 15px;
}

.contentBox2::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.contentBox2::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(144, 147, 153, 0.2);
  background: rgba(144, 147, 153, 0.2);
}

.contentBox2::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 10px;
  background-color: #f7f7f7;
}

.content2 {
  width: 100%;
  border: none;
  margin-top: 0.10417rem;
  position: relative;
  padding-top: 15px;
  margin-left: 0;
  display: block;
}


h5 {
  font-size: 20px;
  text-align: left;
}

.content_div {
  width: 100%;
  height: 52px;
  border: 1px solid rgba(225, 226, 229, 1);
  margin-bottom: 10px;
}

.faultDetail {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  text-align: left;
  vertical-align: top;
}

.textColor {
  color: rgba(154, 157, 176, 1);
}

.text {
  width: 61%;
  display: inline-block;
}

.text-1 {
  width: 75.8%;
  display: inline-block;
}

.ResultDetails-Panel {
  margin-left: 15px;
  width: 98%;
  height: 90%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

.ResultDetails-PersonalInformation {
  width: 100%;
  height: 10%;
  display: flex;
  // justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 0px 0px rgba(129, 133, 156, 0.2);
}

.ResultDetails-PersonalInformation-Model {
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// .ResultDetails-PersonalInformation>div:nth-child(1) {
//   width: 600px;
// }

.ResultDetails-PersonalInformation-Model>span:nth-child(1) {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(2) {
  width: 2px;
  height: 16px;
  margin-left: 20px;
  background: #218CDE;
}

.ResultDetails-PersonalInformation-Model>span:nth-child(3) {
  margin-left: 20px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

// ==========修改添加
.className {
  width: 30%;
  text-align: left;
}

.className>span:nth-child(1) {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.className>span:nth-child(2) {
  width: 2px;
  height: 16px;
  margin-left: 20px;
  background: #218CDE;
  display: inline-block;
}

.className>span:nth-child(3) {
  margin-left: 20px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.headlineBox {
  display: flex;
  width: 70%;
  justify-content: end;
}

.TitleBox {
  margin-left: 105px;
}

.TitleBox>span:nth-child(2) {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.TitleBox>span:nth-child(3) {
  width: 2px;
  height: 16px;
  margin-left: 20px;
  background: #218CDE;
  display: inline-block;
}

.TitleBox>span:nth-child(4) {
  margin-left: 20px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859C;
}

.TitleBox>img {
  width: 18px;
  height: 18px;
  margin-bottom: 7px;
  margin-right: 7px;
}

h2 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 35px;
  color: #1A1A1A;
  margin-top: 50px;
}

.score {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 53px;
  color: #1A1A1A;
  background: linear-gradient(0deg, #7650EB 0%, #764FEB 0%, #764FEB 0%, #DE19F5 0.3662109375%, #764FEB 0.68359375%, #198FF5 72.1923828125%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.scoreText {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 27px;
  color: #1A1A1A;
}

.ranking {
  margin-top: 120px;
}

.masteryDegree {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 21px;
  color: #1A1A1A;
  display: flex;
  justify-content: center;
}

.star /deep/ .el-rate__icon {
  // color: #C8DFF3 !important;
  font-size: 29px;
  margin-top: 2px;
}

.star /deep/ .el-rate__icon.is-void {
  // color: orange !important;
  background: linear-gradient(90deg, #DE19F5, #784AEA, #198FF5) !important;
}
</style>
